<template>
  <div class="dialog-view">
    <el-dialog title="个人资料" :visible.sync="dialogVisible" width="600px">

      <div class="tx-view">
        <el-upload ref="upload01" class="avatar-uploader" :action="upload_url" :show-file-list="false" :on-success="onSuccess" :on-error="onError">
          <div class="tx-border" v-if="params.avatar">
            <el-image fit="cover " :src="getImageSrc(params.avatar)" class="avatar"></el-image>
          </div>
          <i class="el-icon-plus avatar-uploader-icon" v-else></i>
        </el-upload>
        <span>{{ $store.state.user.name }}</span>
      </div>
      <el-form label-width="180px" :model="params" :rules="rules" ref="ruleForm" size="mini">

        <el-form-item label="账号：" >
          <el-input :value="$store.state.user.username" type="text" disabled style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickname">
          <el-input v-model="params.nickname" type="text" placeholder="请输入新密码" @keydown.native.enter="onConfirm()" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="新密码：">
          <el-input v-model="params.pass_new" type="password" placeholder="请输入新密码" @keydown.native.enter="onConfirm()" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="确认密码 ：">
          <el-input v-model="params.pass_con" type="password" placeholder="请重复输入新密码" @keydown.native.enter="onConfirm()" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onConfirm()" size="mini">确认</el-button>
        <el-button @click="dialogVisible = false" size="mini">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'change-password',
  data() {
    return {
      dialogVisible: false,
      upload_url: process.env.VUE_APP_BASE_API + '/api/common/upload',
      params: {
        nickname: '',
        avatar: '',
        pass_new: '',
        pass_con: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ]

      }

    }
  },
  methods: {
    show() {
      console.log(this.$store.state.user)
      this.params = {
        avatar: this.$store.state.user.avatar,
        nickname: this.$store.state.user.name,
        pass_new: '',
        pass_con: ''
      }

      this.dialogVisible = true
    },
    onConfirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return false

        if (this.params.pass_new || this.params.pass_con) {
          if (this.params.pass_new.length < 6) return this.fail('登录密码最少6个字符')
          if (this.params.pass_new != this.params.pass_con) return this.fail('两次密码输入不一致')
        }

        const params = {
          token: getToken(),
          nickname: this.params.nickname,
          password: this.params.pass_new,
          avatar: this.params.avatar
        }
        this.$api.post('/api/login/editinfo', params).then(() => {
          this.successBox('修改成功')
          this.$store.dispatch('user/getInfo')
          this.dialogVisible = false
          if (this.params.pass_new) this.$store.dispatch('user/logout')
          // this.$router.push('/login')
        }).catch((err) => {
          this.apiErr(err)
        })
      })
    },
    // 公司文件上传成功
    onSuccess(e) {
      if (e.code === 1) {
        this.params.avatar = e.data.url
      } else {
        this.fail(e.msg)
      }
    },
    onError() {
      this.fail('上传失败')
      this.$refs.upload01.clearFiles()
    }

  }
}
</script>

<style lang="scss" scoped>
.tx-view {
  display: flex;
  flex-direction: column;
  align-items: center;

  .tx-border {
    border: 2px solid #eeeeee;
    padding: 2px;
    border-radius: 50%;
    width: 100px;
    height: 100px;

    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;

    }
  }


  span {
    font-size: 20px;
    margin-top: 10px;

  }
}

.el-form {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #385FF2;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 16px;
    color: #FFFFFF;
    margin-right: 15px;
    cursor: pointer;
  }

  span:nth-child(2) {
    background: #ffffff;
    border: 1px solid #E9EBF1;
    color: #252631;
  }
}

</style>
